<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>为什么要学习定位？</title>
  <style>
    /*
    问题：以下问题使用标准流或浮动可以实现吗？
      1. 某个元素可以在盒子内部自由的移动，并且压住其他盒子
      2. 当我们滚动窗口的时候，盒子固定屏幕某个位置的
    
    定位组成
      定位：将盒子【定】在某一个【位】置，所以定位也是在摆放盒子，按照定位的方式移动盒子。
      定位 = 定位模式 + 边偏移。
      【定位模式】用于指定一个元素在文档中的定位方式。
      【边偏移】则决定了该元素的最终位置。
      
    */

    * {
      margin: 0;
      padding: 0;
    }

    p {
      height: 30px;
      line-height: 30px;
    }

    .red {
      color: red;
    }

    .strong {
      font-weight: 700;
    }

    .question,
    .answer {
      margin: 20px;
      border-bottom: 1px solid #ccc;
    }

    .question ol li {
      height: 30px;
      margin-left: 20px;
      font-size: 16px;
      line-height: 30px;
    }

    table {
      width: 800px;
    }

    th,
    td {
      /* height: 30px; */
      padding: 5px;
    }

    table,
    th,
    td {
      border: 1px solid #ccc;
      border-collapse: collapse;
      text-align: left;
      font-size: 16px;
    }
    tr:nth-child(even) {
      background-color: #f8f8f8;
    }

    code {
      font-family: "Roboto Mono", Monaco, courier, monospace;
      font-size: 0.85em;
      background-color: #eee;
      -webkit-font-smoothing: initial;
      color: #d63200;
      padding: 3px 5px;
      margin: 0 2px;
      border-radius: 2px;
      white-space: nowrap;
    }
  </style>
</head>

<body>
  <div class="question">
    <h1>问题：以下问题使用标准流或浮动可以实现吗？</h1>
    <ol>
      <li>某个元素可以在盒子内部自由的移动，并且压住其他盒子</li>
      <li>当我们滚动窗口的时候，盒子固定屏幕某个位置的</li>
    </ol>
  </div>
  <div class="answer">
    <h1>定位组成</h1>
    <p>
      <span class="red strong">定位</span>：将盒子<span class="red">定</span>在某一个<span class="red">位</span>置，所以<span
        class="red strong"></span>定位也是在摆放盒子，按照定位的方式移动盒子</span>。
    </p>
    <p>定位 = 定位模式 + 边偏移。</p>
    <p>
      <span class="red strong">定位模式</span>用于指定一个元素在文档中的定位方式。
    </p>
    <p>
      <span class="red strong">边偏移</span>则决定了该元素的最终位置。
    </p>
    <h1>1. 定位模式</h1>
    <p>定位模式决定元素的定位方式，它通过CSS的<span class="red">position</span>属性来设置，其值可以分为四个：</p>
    <table cellspacing="0">
      <thead>
        <tr>
          <th>值</th>
          <th>语义</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <code>static</code>
          </td>
          <td>
            <span class="strong">静态</span>定位
          </td>
        </tr>
        <tr>
          <td>
            <code>relative</code>
          </td>
          <td>
            <span class="strong">相对</span>定位
          </td>
        </tr>
        <tr>
          <td>
            <code>absolute</code>
          </td>
          <td>
            <span class="strong">绝对</span>定位
          </td>
        </tr>
        <tr>
          <td>
            <code>fixed</code>
          </td>
          <td>
            <span class="strong">固定</span>定位
          </td>
        </tr>
      </tbody>
    </table>
    <h1>2. 边偏移</h1>
    <p>边偏移就是定位的盒子移动到最终位置。有 top、bottom、left、right 4个属性。</p>
    <table align="left" cellspacing="0">
      <thead>
        <tr>
          <th>边偏移属性</th>
          <th>示例</th>
          <th>描述</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <code>top</code>
          </td>
          <td>
            <code class="strong">top: 80px</code>定位
          </td>
          <td>
            <span class="strong">顶部</span>
            偏移量，定义元素相对于父元素
            <span class="strong">上边线的距离。</span>
          </td>
        </tr>
        <tr>
          <td>
            <code>bottom</code>
          </td>
          <td>
            <code class="strong">bottom: 80px</code>定位
          </td>
          <td>
            <span class="strong">底部</span>
            偏移量，定义元素相对于父元素
            <span class="strong">下边线的距离。</span>
          </td>
        </tr>
        <tr>
          <td>
            <code>left</code>
          </td>
          <td>
            <code class="strong">left: 80px</code>定位
          </td>
          <td>
            <span class="strong">左侧</span>
            偏移量，定义元素相对于父元素
            <span class="strong">左边线的距离。</span>
          </td>
        </tr>
        <tr>
          <td>
            <code>right</code>
          </td>
          <td>
            <code class="strong">right: 80px</code>定位
          </td>
          <td>
            <span class="strong">右侧</span>
            偏移量，定义元素相对于父元素
            <span class="strong">右边线的距离。</span>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</body>

</html>